import { useTableScroll } from '@/hooks/useTableScroll';
import { getServiceFeeDetail } from '@/services/financial-center';
import { accDiv } from '@/utils/math';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Button, message } from 'antd';
import { useRef, useState } from 'react';

const ServiceDetail = () => {
  const [count] = useState(0);
  const tableScrollHeight = useTableScroll({}, count);
  const actionRef = useRef<ActionType>();
  const [mainTableParams, setMainTableParams] = useState({});
  const columns: ProColumns<any>[] = [
    {
      title: '交易时间',
      dataIndex: 'createTime',
      width: 160,
      valueType: 'dateRange',
      order: 1,
      search: {
        transform: (value: any) => {
          if (!value) return null;
          return {
            createMinTime: value[0],
            createMaxTime: value[1],
          };
        },
      },
      render: (_, record) => {
        return <div>{record.createTime}</div>;
      },
    },
    {
      title: '交易类型',
      dataIndex: 'type',
      width: 200,
      order: 3,
      valueEnum: {
        '': { text: '不限' },
        safe_pay_trans_service_price: { text: '安全发批量转账服务费' },
        safe_pay_trans_service_price_refund: {
          text: '安全发批量转账服务费退款',
        },
        check_code: { text: '安全发验证码' },
        pay_trans_service_price: { text: '批量有密转账服务费' },
        pay_trans_service_price_refund: { text: '批量有密转账服务费退款' },
        charge: { text: '服务费充值' },
        user_withdraw_refund: { text: '服务费提现' },
        user_withdraw_fail: { text: '服务费提现失败退回' },
      },
      fieldProps: {
        defaultValue: '',
      },
    },
    {
      title: '产品类型',
      dataIndex: 'prod_type',
      width: 100,
      hideInSearch: true,
    },
    {
      title: '交易流水号',
      dataIndex: 'id',
      width: 160,
      order: 2,
    },
    {
      title: '交易金额',
      dataIndex: 'change',
      width: 100,
      hideInSearch: true,
      render: (_, record) => {
        return (
          <div className="text-[#67c23a]">{accDiv(record.change, 100)}</div>
        );
      },
    },
    {
      title: '服务费余额',
      dataIndex: 'serviceFee',
      width: 100,
      hideInSearch: true,
    },
    {
      title: '备注',
      dataIndex: 'memo',
      width: 160,
      hideInSearch: true,
      render: (_, record) => {
        return (
          <div
            className={`${
              record.relatedDetailNo ? 'text-[#00bdff] cursor-pointer' : ''
            }`}
            onClick={() => {
              if (record.relatedDetailNo) {
                history.push(
                  `/production-center/acs/acs-record?importBatchNo=${record.relatedDetailNo}`,
                );
              }
            }}
          >
            {record.relatedDetailNo ? record.memo : '-'}
          </div>
        );
      },
    },
  ];

  return (
    <div>
      <ProTable
        scroll={{ y: tableScrollHeight, x: 200 }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        dateFormatter="YYYY-MM-DD 00:00:00"
        request={async (params) => {
          const { current, ...rest } = params;
          const searchData = {
            pageNo: Number(current) - 1,
            ...rest,
          };
          try {
            const res = (await getServiceFeeDetail(searchData)) as any;
            setMainTableParams(searchData);
            if (res.success) {
              return {
                data: res.data,
                total: res.count,
                success: true,
              };
            } else {
              message.error(res.resultMessage);
            }
            return {
              data: [],
            };
          } catch (error) {
            return {
              data: [],
              success: false,
            };
          }
        }}
        columns={columns}
        pagination={{
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        actionRef={actionRef}
        cardBordered
        columnsState={{
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
        }}
        toolBarRender={() => [
          <Button
            key="button"
            type="primary"
            onClick={() => {
              const formDom = document.createElement('form');
              formDom.setAttribute('type', 'hidden');
              formDom.setAttribute('target', '_black');
              formDom.setAttribute('method', 'get');
              formDom.setAttribute(
                'action',
                '/api/merchant/account-log/export',
              );
              const inputDom = document.createElement('input');
              inputDom.setAttribute('type', 'hidden');
              inputDom.setAttribute('name', 'searchModelJson');

              inputDom.setAttribute('value', JSON.stringify(mainTableParams));

              formDom.append(inputDom);
              document.body.append(formDom);
              formDom.submit();
            }}
          >
            导出
          </Button>,
        ]}
      />
    </div>
  );
};

export default ServiceDetail;
